<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../css/public.css" />
    <style>
       #content {
		width: 100%;
		height: 100vh;
		background-color: #f3f3f3;
	}

	.peopleBox,
	.getMoney {
		width: 100%;
		padding-top: 20px;
	}

	.peopleBox .top,
	.getMoney .top {
		width: calc(100% - 20px);
		height: 45px;

	}

	.peopleBox .top input,
	.getMoney .top input {
		width: 50%;
		height: 30px;
		background-color: #FFF;
		padding-left: 10px;
		border-radius: 8px;
	}

	.peopleBox .search,
	.getMoney .search {
		height: 30px;
		padding-left: 10px;
		padding-right: 10px;
		color: #FFF;
		font-size: 13px;
		line-height: 30px;
		background-color: #FF2265;
		border-radius: 8px;
	}

	.peopleBox .reset,
	.getMoney .reset {
		height: 30px;
		padding-left: 10px;
		padding-right: 10px;
		line-height: 30px;
		color: #FFF;
		font-size: 13px;
		background-color: #8F9DCC;
		border-radius: 8px;
	}

	.peopleBox .ListsBox {
		margin-top: 20px;
		width: 100%;
	}

	.peopleBox .ListsBox .head {
		width: calc(100% - 30px);
		height: 30px;
		padding: 0 15px;
		margin-bottom: 10px;
	}

	.ListsBox .head .right {
		width: 60px;
		height: 100%;
		background-color: #FFF;
		border-radius: 10px;
	}

	.ListsBox .ListTo {
		width: 100%;

		background-color: #FFF;
		margin-bottom: 10px;
	}

	.ListTo .ListToHead {
		width: calc(100% - 30px);
		height: 50px;
		border-bottom: 1px solid #E2E2E2;
		padding: 10px 15px;
	}

	.ListToHead .left {
		width: 85%;
		height: 100%;
		color: #999999;
	}

	.ListToHead .left img {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		margin-right: 5px;
	}

	.ListToHead .center .top {
		width: 100%;
	}

	.ListToHead .center .bottom {
		width: 100%;
	}


	.ListToHead .center {
		width: calc(100% - 60px);
		height: 50px;
	}

	.ListToHead .rightTO {
		width: 15%;
		height: 50px;
		font-size: 13px;
		color: #ED565F;
	}

	.ListTo .ListBott {
		width: calc(100% - 30px);
		height: 100px;
		padding: 10px 10px;
	}

	.ListTo .ListBott .bottTop {
		width: 100%;
		height: 100%;
	}

	.bottTopOne {
		width: 85px;
		height: 100%;
		font-size: 10px;
		color: #999999;
	}
	.null {
		width: 120px;
		height: 100px;
		position: absolute;
		top: 60px;
		left: 50%;
		transform: translate(-50%, 100px);
	}

	.null img {
		width: 100%;
		height: 80px;
		margin-bottom: 10px;
	}

	.null p {
		font-size: 17px;
		color: #DDDDDD;
		font-weight: bold;
	}
    </style>
</head>

<body>
    <div id="content">
		
		<div class="peopleBox flex_column">
			<div class="top flex_around">
				<input type="number" placeholder="输入成员ID" class="uid">
				<div class="search" onclick="search()">
					搜索
				</div>
				<div class="reset" onclick="chongzhi()">
					重置
				</div>
			</div>

			<div class="null flex_column_center" v-if="dataarr.count==0">
				<img src="../image/img/invite/null.png" alt="">
				<p>暂无数据</p>
			</div>

			<div class="ListsBox flex_column" v-if="dataarr.count>0">
				<div class="head flex_between">
					<p style="font-size: 12px;">成员列表{{dataarr.count}}个</p>
					<div class="right flex_center">
						<p style="margin-right: 5px;font-size: 12px;" onclick="_ziji()">{{ziji[0].name}}</p>
						<img src="../image/img/invite/bott.png" alt="" style="width: 10px;height: 5px;">
					</div>
				</div>

				<div v-for="(m, index) in dataarr.data">

					<div class="ListTo flex_column">
						<div class="ListToHead flex_between">
							<div class="left flex">
								<img :src="returnImg(m.head)" alt="" onerror="this.src='../image/touxiang.png'">
								<div class="center flex_column_between">
									<div class="top flex">
										<p style="font-size: 14px;color: #333333;font-weight:500;">{{m.name}}</p>
										<p style="font-size: 8px;color: #999999;">（注册时间：{{m.register_datetime}}）</p>
									</div>
									<div class="bottom flex">
										<p style="margin-right: 10px;font-size: 12px;">ID：{{m.id}}</p>
										<p @click="copyTxt(m.id)" 
											style="background: #EDEDED;width: 30px;height: 20px;border-radius: 5px;text-align: center;line-height: 20px;font-size: 10px;">
											复制</p>
									</div>
								</div>
							</div>

							<div class="rightTO flex_between" @click="_url({url:'daili_xiangqing',title:'成员详情', moreTitle: '去邀请',id:m.id})">
								<p style="font-weight: 500;">详情</p>
									<img src="../image/img/arrow_r.png" alt="" style="width: 7px;height: 13px;">
							</div>
						</div>

						<div class="ListBott flex_column_around">
							<div class="bottTop flex_around">
								<div class="bottTopOne flex_column_center">
									<p style="font-size: 12px;color: #7489A6;height: 20px;" v-if="ziji[0].id==0">{{m.name}}</p>
									<p style="font-size: 12px;color: #7489A6;height: 20px;" v-else>{{user.name}}</p>
									<p>好友</p>
								</div>
								<div class="bottTopOne flex_column_center">
									<p style="font-size: 12px;color: #DB100B;height: 20px;">{{m.countshouyi}}</p>
									<p>总收益(积分)</p>
								</div>
								<div class="bottTopOne flex_column_center">
									<p style="color: #333333;font-size: 12px;height: 20px;" v-if="m.online">在线</p>
									<p style="color: #333333;font-size: 12px;height: 20px;" v-else>离线</p>
									<p>在线状态</p>
								</div>
								<div class="bottTopOne flex_column_center">
									<p style="color: #333333;font-size: 12px;height: 20px;">{{m.chat}}</p>
									<p>私信收益(积分)</p>
								</div>
							</div>
							<div class="bottTop flex_around">
								<div class="bottTopOne flex_column_center">
									<p style="color: #333333;font-size: 12px;height: 20px;">{{m.sound}}</p>
									<p>语音收益(积分)</p>
								</div>
								<div class="bottTopOne flex_column_center">
									<p style="color: #333333;font-size: 12px;height: 20px;">{{m.video}}</p>
									<p>视频收益(积分)</p>
								</div>
								<div class="bottTopOne flex_column_center">
									<p style="color: #333333;font-size: 12px;height: 20px;">{{m.gift}}</p>
									<p>礼物收益(积分)</p>
								</div>
								<div class="bottTopOne flex_column_center">
									<p style="color: #333333;font-size: 12px;height: 20px;">{{m.tuiguang}}</p>
									<p>邀请奖励(积分)</p>
								</div>
							</div>
						</div>
					</div>
				</div>


				
				
			</div>
		</div>







	</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/jquery.js"></script>
<script type="text/javascript" src="../script/vue.js"></script>
<script type="text/javascript" src="../script/ffkj.js"></script>
<script type="text/javascript" src="../script/update.js"></script>
<script type="text/javascript" src="../script/swiper.js"></script>
<script type="text/javascript" src="../script/jdate.min.js"></script>
<script src="../script/select_json.js"></script>
<script type="text/javascript" src="../json/imglist.js"></script>
<script type="text/javascript" src="../json/user.js"></script>
<script type="text/javascript" src="../json/rw.js"></script>
<script type="text/javascript">
    var userid;
    var view = new Vue({
        el: '#content',
        data: {
			ziji:[{"name":'好友',"id":0}],
			dataarr:[],
			user:[],
			
        },
        methods: {
			copyTxt(text) {
                copyTxt(text)
            },
			returnImg(url) {
                return returnImg(url);
            },
			_url(param, url) {
                _url(param, url);
            },
        }
    });

    apiready = function() {
        view.ios = $api.getStorage('shang');
        userid = $api.getStorage('userid');
    	view.user=$api.getStorage('user');
		_daydata()

    };

	

	function _ziji(){
		var path=[{"name":'好友',"id":0},{"name":view.user.name,"id":1}];
		openUIActionSelector(path, {
        col: 1,
        title: '对象'
    }, function (ret, err) {
        console.log(JSON.stringify(ret))
		if(ret.eventType=='ok'){
		view.ziji=ret.selectedInfo
		_daydata()
		}
	})
	}
	
	function _daydata() {
        _ajax('api/User/chengyuan', function(ret, err) {
            if (ret && ret.data) {
				view.dataarr=ret.data
            }else{
				_msg(ret.msg)
			}
        },{
			user_id: $api.getStorage('userid'),
			user:view.ziji[0].id
		})
    }
	function chongzhi(){
		$(".uid").val('');
	}
	function search(){
		var uid=$(".uid").val();

		_url({url:'daili_xiangqing',title:'成员详情', moreTitle: '去邀请',id:uid})
	}
	

</script>

</html>